<template>
  <div class="app-container">
    <div class="app-container__section">
      <PlusSearch
        v-bind="searchBinds"
        :columns="columns"
        v-model="gSearchForm"
      />
    </div>
    <div class="app-container__section">
      <PlusTable
        v-bind="tableBinds"
        :columns="columns"
      >
        <template #title>
          <table-title />
        </template>
        <template #toolbar>
          <ClockTimer :task="gGetList"/>
          <SearchAreaControl v-model="gShowSearchForm"/>
        </template>
        <template #plus-cell-action="scope">
          <el-button link type="primary" icon="Delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">强退</el-button>
        </template>
      </PlusTable>
    </div>
  </div>
</template>

<script setup >
import { forceLogout, } from '@/api/monitor/online'
import { PlusSearch, PlusTable } from 'plus-pro-components'
import { useColumnsDict, useCommonConfig } from './hook.js'
import { useListHook,useDelHook  } from '@/hooks/crud/index.js'
import { useListConfigHook } from '@/hooks/usePlusConfigHook.js'
import { formatRangeTime } from '@/utils/index.js'
defineOptions({
  name:'Online'
})
const { proxy,apiFn,primaryKey,moduleName,beforeDelFn } = useCommonConfig()
const { dictData, columns, } = useColumnsDict()

// ====================列表逻辑=========================
const gSearchForm = ref({  })
const { gGetList, gAllExposeOption } = useListHook({
  listApiFn:apiFn.listApiFn,
  gSearchForm,
  beforeRequest: (reqData) => {
    let { loginTime, ...rest } = reqData;
    let timeRange = formatRangeTime(loginTime,undefined,'YYYY-MM-DD')
    return {
      ...rest,
      params:timeRange
    }
  },
  afterRequest: (resData) => {
    return resData
  }
})
// ====================属性绑定=========================
const { gTableBinds, gSearchBinds, gSelection, gShowSearchForm } = useListConfigHook()
const tableBinds = computed(() => gTableBinds({ ...gAllExposeOption, isSelection:false,primaryKey }))
const searchBinds = computed(() => gSearchBinds({ ...gAllExposeOption } ))

/** 强退按钮操作 */
function handleForceLogout(row) {
  proxy.$modal
    .confirm('是否确认强退名称为"' + row.userName + '"的用户?')
    .then(function () {
      return forceLogout(row.tokenId)
    })
    .then(() => {
      gGetList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}

</script>
